<script setup>
import { ref, computed } from 'vue'
import {useStudyRoomStore} from "@/stores/index.js";
const store = useStudyRoomStore();
const closeWidget = () => {
  store.widgetSwitch.toDo = false;
};

// 待办事项列表
const todos = ref(localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')) : [])
// 新待办事项的输入
const newTodo = ref('')

/**
 * 添加新待办事项的函数
 * @returns {void} 无返回值。
 */
const addTodo = () => {
  // 检查用户输入是否为空（去除首尾空格后）
  if (newTodo.value.trim()) {
    // 将新待办事项添加到待办事项列表中
    todos.value.push({
      id: Date.now(), // 使用当前时间戳作为唯一标识符
      text: newTodo.value, // 用户输入的待办事项内容
      completed: false, // 默认未完成状态
    })
    localStorage.setItem('todos', JSON.stringify(todos.value))
    // 清空输入框内容
    newTodo.value = ''
  }
}

/**
 * 删除待办事项
 * @param {string} id - 待删除的待办事项的唯一标识符
 */
const removeTodo = (id) => {
  todos.value = todos.value.filter((todo) => todo.id !== id)
  localStorage.setItem('todos', JSON.stringify(todos.value))
}

/**
 * 切换待办事项的完成状态
 * @param {number} id - 待办事项的唯一标识符
 */
const toggleTodo = (id) => {
  const todo = todos.value.find((todo) => todo.id === id)
  if (todo) {
    todo.completed = !todo.completed
    localStorage.setItem('todos', JSON.stringify(todos.value))
  }
}

// 添加计算属性对列表进行排序
const sortedTodos = computed(() => {
  return [...todos.value].sort((a, b) => {
    if (a.completed === b.completed) return 0
    return a.completed ? 1 : -1
  })
})
</script>

<template>
  <div class="todo-layout">
    <h2>
      <span>To Do</span>
      <span class="two-icon">
        <img src="../../assets/icon/StudyRoom/smile.png" alt="" class="icon1" />
        <img src="../../assets/icon/StudyRoom/exit.png" alt="" class="icon2" @click="closeWidget"/>
      </span>
    </h2>
    <div class="todo-input">
      <input v-model="newTodo" @keyup.enter="addTodo" type="text" placeholder="添加新的待办事项" />
      <button @click="addTodo">添加</button>
    </div>
    <transition-group name="todo-list" tag="ul" class="todo-list">
      <li v-for="todo in sortedTodos" :key="todo.id" :class="{ completed: todo.completed }">
        <input
          type="checkbox"
          :checked="todo.completed"
          @change="toggleTodo(todo.id)"
          class="check"
        />
        <span>{{ todo.text }}</span>
        <button @click="removeTodo(todo.id)" class="delete-btn">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="27"
            height="27"
            viewBox="0 0 27 27"
            fill="none"
          >
            <path
              d="M12.8621 0.515659C13.0746 0.50522 13.2873 0.5 13.5 0.5C13.7127 0.500268 13.9252 0.505746 14.1376 0.516433C14.3501 0.52712 14.5621 0.543004 14.7737 0.564084C14.9853 0.585164 15.1963 0.611415 15.4067 0.642838C15.6171 0.67426 15.8265 0.710816 16.035 0.752506C16.2436 0.794193 16.451 0.840969 16.6573 0.892823C16.8636 0.944678 17.0683 1.00156 17.2719 1.06346C17.4754 1.12536 17.6772 1.1922 17.8774 1.26399C18.0776 1.33579 18.2759 1.41244 18.4723 1.49395C18.6688 1.57547 18.8631 1.66174 19.0554 1.75278C19.2475 1.84382 19.4374 1.93951 19.625 2.03986C19.8125 2.14021 19.9974 2.24509 20.1797 2.3545C20.3622 2.4639 20.5418 2.57772 20.7186 2.69594C20.8954 2.81415 21.0691 2.93662 21.2399 3.06336C21.4107 3.19009 21.5784 3.32092 21.7426 3.45587C21.9071 3.59083 22.0681 3.72974 22.2256 3.87256C22.3832 4.01541 22.5371 4.16202 22.6876 4.3124C22.8379 4.46279 22.9846 4.61679 23.1275 4.77435C23.2703 4.93193 23.4091 5.09292 23.5441 5.25729C23.679 5.42169 23.81 5.58927 23.9366 5.76008C24.0633 5.93088 24.1858 6.10467 24.3041 6.28147C24.4223 6.45827 24.536 6.63785 24.6455 6.82023C24.7549 7.00262 24.8597 7.18759 24.9601 7.3751C25.0604 7.56261 25.1561 7.75247 25.2473 7.94468C25.3383 8.1369 25.4246 8.3312 25.506 8.52765C25.5876 8.72409 25.6643 8.92242 25.7359 9.12262C25.8078 9.32284 25.8747 9.52466 25.9366 9.72812C25.9985 9.9316 26.0554 10.1365 26.1072 10.3427C26.1591 10.549 26.2057 10.7564 26.2476 10.965C26.2892 11.1735 26.3258 11.3829 26.357 11.5933C26.3885 11.8037 26.415 12.0147 26.436 12.2263C26.4571 12.4379 26.4729 12.6499 26.4834 12.8624C26.4942 13.0748 26.4997 13.2873 26.5 13.5C26.5 13.7127 26.4946 13.9254 26.4842 14.1379C26.4738 14.3504 26.4584 14.5625 26.4373 14.7742C26.4165 14.986 26.3906 15.197 26.3593 15.4075C26.3281 15.618 26.2915 15.8275 26.2501 16.0362C26.2088 16.2449 26.162 16.4524 26.1105 16.6587C26.0586 16.865 26.0018 17.0701 25.9402 17.2737C25.8784 17.4774 25.8118 17.6792 25.74 17.8795C25.6683 18.0799 25.5918 18.2783 25.5104 18.4749C25.429 18.6714 25.3428 18.8659 25.2518 19.0581C25.1608 19.2505 25.0653 19.4405 24.965 19.6282C24.8648 19.8157 24.7598 20.0008 24.6504 20.1833C24.5411 20.3658 24.4273 20.5455 24.309 20.7225C24.1909 20.8993 24.0683 21.0732 23.9418 21.2441C23.815 21.4151 23.684 21.5826 23.5492 21.747C23.4141 21.9115 23.2752 22.0727 23.1324 22.2303C22.9895 22.3879 22.8428 22.542 22.6925 22.6925C22.542 22.8428 22.3879 22.9895 22.2303 23.1324C22.0727 23.2752 21.9115 23.4141 21.747 23.5492C21.5826 23.684 21.4151 23.815 21.2441 23.9418C21.0732 24.0683 20.8993 24.1909 20.7225 24.309C20.5455 24.4273 20.3658 24.5411 20.1833 24.6504C20.0008 24.7598 19.8157 24.8648 19.6282 24.965C19.4405 25.0653 19.2505 25.1608 19.0581 25.2518C18.8659 25.3428 18.6714 25.429 18.4749 25.5104C18.2783 25.5918 18.0799 25.6683 17.8795 25.74C17.6792 25.8118 17.4774 25.8784 17.2737 25.9402C17.0701 26.0018 16.865 26.0586 16.6587 26.1105C16.4524 26.162 16.2449 26.2088 16.0362 26.2501C15.8275 26.2915 15.618 26.3281 15.4075 26.3593C15.197 26.3906 14.986 26.4165 14.7742 26.4373C14.5625 26.4584 14.3504 26.4738 14.1379 26.4842C13.9254 26.4946 13.7127 26.5 13.5 26.5C13.2873 26.5 13.0746 26.4946 12.8621 26.4842C12.6496 26.4738 12.4375 26.4584 12.2258 26.4373C12.014 26.4165 11.803 26.3906 11.5925 26.3593C11.382 26.3281 11.1725 26.2915 10.9638 26.2501C10.7551 26.2088 10.5476 26.162 10.3413 26.1105C10.1349 26.0586 9.92991 26.0018 9.7263 25.9402C9.52271 25.8784 9.32076 25.8118 9.12041 25.74C8.92012 25.6683 8.72165 25.5918 8.52511 25.5104C8.32857 25.429 8.13412 25.3428 7.94178 25.2518C7.74945 25.1608 7.55949 25.0653 7.37185 24.965C7.18421 24.8648 6.99914 24.7598 6.81665 24.6504C6.63416 24.5411 6.45449 24.4273 6.27759 24.309C6.10069 24.1909 5.92678 24.0683 5.75592 23.9418C5.58503 23.815 5.41735 23.684 5.2529 23.5492C5.08845 23.4141 4.92739 23.2752 4.76974 23.1324C4.61209 22.9895 4.45805 22.8428 4.3076 22.6925C4.15716 22.542 4.0105 22.3879 3.86763 22.2303C3.72476 22.0727 3.58583 21.9115 3.45087 21.747C3.3159 21.5826 3.18504 21.4151 3.0583 21.2441C2.93157 21.0732 2.80909 20.8993 2.69089 20.7225C2.57269 20.5455 2.4589 20.3658 2.34953 20.1833C2.24015 20.0008 2.13532 19.8157 2.03502 19.6282C1.93473 19.4405 1.8391 19.2505 1.74814 19.0581C1.65718 18.8659 1.57098 18.6714 1.48957 18.4749C1.40815 18.2783 1.3316 18.0799 1.25993 17.8795C1.18825 17.6792 1.12153 17.4774 1.05978 17.2737C0.998017 17.0701 0.941288 16.865 0.889594 16.6587C0.837898 16.4524 0.791296 16.2449 0.749792 16.0362C0.708284 15.8275 0.671923 15.618 0.640705 15.4075C0.609488 15.197 0.583452 14.986 0.562599 14.7742C0.541745 14.5625 0.526098 14.3504 0.515659 14.1379C0.50522 13.9254 0.5 13.7127 0.5 13.5C0.5 13.2873 0.50522 13.0746 0.515659 12.8621C0.526098 12.6496 0.541745 12.4375 0.562599 12.2258C0.583452 12.014 0.609488 11.803 0.640705 11.5925C0.671923 11.382 0.708284 11.1725 0.749792 10.9638C0.791296 10.7551 0.837898 10.5476 0.889594 10.3413C0.941288 10.1349 0.998017 9.92991 1.05978 9.7263C1.12153 9.52271 1.18825 9.32076 1.25993 9.12041C1.3316 8.92012 1.40815 8.72165 1.48957 8.52511C1.57098 8.32857 1.65718 8.13412 1.74814 7.94178C1.8391 7.74945 1.93473 7.55949 2.03502 7.37185C2.13532 7.18421 2.24015 6.99914 2.34953 6.81665C2.4589 6.63416 2.57269 6.45449 2.69089 6.27759C2.80909 6.10069 2.93157 5.92678 3.0583 5.75592C3.18504 5.58503 3.3159 5.41735 3.45087 5.2529C3.58583 5.08845 3.72476 4.92739 3.86763 4.76974C4.0105 4.61209 4.15716 4.45805 4.3076 4.3076C4.45805 4.15716 4.61209 4.0105 4.76974 3.86763C4.92739 3.72476 5.08845 3.58583 5.2529 3.45087C5.41735 3.3159 5.58503 3.18504 5.75592 3.0583C5.92678 2.93157 6.10069 2.80909 6.27759 2.69089C6.45449 2.57269 6.63416 2.4589 6.81665 2.34953C6.99914 2.24015 7.18421 2.13532 7.37185 2.03502C7.55949 1.93473 7.74945 1.8391 7.94178 1.74814C8.13412 1.65718 8.32857 1.57098 8.52511 1.48957C8.72165 1.40815 8.92012 1.3316 9.12041 1.25993C9.32076 1.18825 9.52271 1.12153 9.7263 1.05978C9.92991 0.998017 10.1349 0.941288 10.3413 0.889594C10.5476 0.837898 10.7551 0.791296 10.9638 0.749792C11.1725 0.708284 11.382 0.671923 11.5925 0.640705C11.803 0.609488 12.014 0.583452 12.2258 0.562599C12.4375 0.541745 12.6496 0.526098 12.8621 0.515659ZM12.9428 24.8264C13.1284 24.8355 13.3141 24.8401 13.5 24.8401C13.6859 24.8401 13.8716 24.8355 14.0572 24.8264C14.2429 24.8173 14.4282 24.8037 14.6131 24.7855C14.7981 24.7673 14.9825 24.7445 15.1663 24.7172C15.3502 24.6899 15.5332 24.6581 15.7155 24.6218C15.8978 24.5856 16.0791 24.545 16.2594 24.4998C16.4397 24.4546 16.6187 24.4051 16.7966 24.3511C16.9744 24.2971 17.1509 24.2388 17.3259 24.1763C17.5009 24.1137 17.6743 24.0467 17.8459 23.9756C18.0177 23.9046 18.1875 23.8291 18.3555 23.7497C18.5235 23.6702 18.6894 23.5867 18.8534 23.4991C19.0174 23.4115 19.1791 23.3199 19.3385 23.2243C19.4979 23.1288 19.6549 23.0295 19.8094 22.9261C19.9639 22.823 20.1157 22.7159 20.265 22.6052C20.4144 22.4945 20.5608 22.3801 20.7044 22.2623C20.8482 22.1444 20.9888 22.023 21.1266 21.8982C21.2642 21.7734 21.3988 21.6453 21.5303 21.5138C21.6617 21.3824 21.7898 21.2478 21.9146 21.1102C22.0394 20.9724 22.1608 20.8317 22.2787 20.688C22.3965 20.5444 22.511 20.398 22.6216 20.2486C22.7324 20.0993 22.8394 19.9475 22.9426 19.793C23.0459 19.6384 23.1452 19.4815 23.2407 19.3221C23.3363 19.1626 23.4279 19.0009 23.5155 18.837C23.6031 18.673 23.6868 18.5071 23.7661 18.3391C23.8456 18.1711 23.921 18.0012 23.992 17.8295C24.0632 17.6577 24.1301 17.4845 24.1927 17.3095C24.2552 17.1345 24.3136 16.958 24.3675 16.7802C24.4215 16.6023 24.471 16.4233 24.5162 16.243C24.5614 16.0627 24.602 15.8814 24.6382 15.6991C24.6746 15.5168 24.7063 15.3338 24.7336 15.1499C24.7609 14.9661 24.7837 14.7817 24.8019 14.5967C24.8201 14.4117 24.8337 14.2264 24.8428 14.0408C24.8519 13.8552 24.8565 13.6694 24.8565 13.4836C24.8565 13.2977 24.8519 13.1119 24.8428 12.9263C24.8337 12.7407 24.8201 12.5554 24.8019 12.3704C24.7837 12.1855 24.7609 12.0011 24.7336 11.8172C24.7063 11.6334 24.6746 11.4503 24.6382 11.268C24.602 11.0857 24.5614 10.9044 24.5162 10.7241C24.471 10.5439 24.4215 10.3648 24.3675 10.1869C24.3136 10.0091 24.2552 9.83265 24.1927 9.65765C24.1301 9.48267 24.0632 9.30932 23.992 9.13761C23.921 8.96589 23.8456 8.79603 23.7661 8.62802C23.6866 8.46001 23.6031 8.29405 23.5155 8.13014C23.4279 7.96624 23.3363 7.80457 23.2407 7.64516C23.1452 7.48573 23.0459 7.32875 22.9426 7.17423C22.8394 7.01968 22.7324 6.86777 22.6216 6.7185C22.511 6.56923 22.3965 6.42275 22.2787 6.27909C22.1608 6.1354 22.0394 5.99471 21.9146 5.85699C21.7898 5.71929 21.6617 5.58472 21.5303 5.45331C21.3988 5.32188 21.2642 5.19376 21.1266 5.06895C20.9888 4.94415 20.8482 4.82278 20.7044 4.70487C20.5608 4.58696 20.4144 4.47264 20.265 4.36194C20.1157 4.25121 19.9639 4.14424 19.8094 4.04097C19.6549 3.93772 19.4979 3.8383 19.3385 3.74277C19.1791 3.64722 19.0174 3.55563 18.8534 3.46801C18.6894 3.38039 18.5235 3.29685 18.3555 3.21741C18.1875 3.13793 18.0177 3.06262 17.8459 2.99151C17.6743 2.92039 17.5009 2.85352 17.3259 2.79091C17.1509 2.7283 16.9744 2.67001 16.7966 2.61606C16.6187 2.56211 16.4397 2.51256 16.2594 2.46739C16.0791 2.42223 15.8978 2.38152 15.7155 2.34527C15.5332 2.30902 15.3502 2.27725 15.1663 2.24998C14.9825 2.22269 14.7981 2.19996 14.6131 2.18175C14.4282 2.16353 14.2429 2.14986 14.0572 2.14073C13.8716 2.13161 13.6859 2.12706 13.5 2.12706C13.3141 2.12706 13.1284 2.13161 12.9428 2.14073C12.7571 2.14986 12.5718 2.16353 12.3869 2.18175C12.2019 2.19996 12.0175 2.22269 11.8337 2.24998C11.6498 2.27725 11.4668 2.30902 11.2845 2.34527C11.1022 2.38152 10.9209 2.42223 10.7406 2.46739C10.5603 2.51256 10.3813 2.56211 10.2034 2.61606C10.0255 2.67001 9.84911 2.7283 9.67412 2.79091C9.49912 2.85352 9.32575 2.92039 9.15403 2.99151C8.98232 3.06262 8.81249 3.13793 8.64447 3.21741C8.47646 3.29685 8.31048 3.38039 8.14658 3.46801C7.98267 3.55563 7.821 3.64722 7.66157 3.74277C7.50217 3.8383 7.34521 3.93772 7.19066 4.04097C7.03612 4.14424 6.88422 4.25121 6.73495 4.36194C6.58565 4.47265 6.43917 4.58696 6.29551 4.70487C6.15183 4.82278 6.01114 4.94415 5.87344 5.06895C5.73572 5.19376 5.60115 5.32188 5.46974 5.45331C5.33831 5.58472 5.21019 5.71929 5.08538 5.85699C4.96058 5.99471 4.8392 6.1354 4.72129 6.27909C4.6034 6.42275 4.4891 6.56923 4.37837 6.7185C4.26764 6.86777 4.16067 7.01968 4.0574 7.17423C3.95413 7.32875 3.85473 7.48573 3.7592 7.64516C3.66365 7.80457 3.57206 7.96624 3.48446 8.13014C3.39684 8.29405 3.31331 8.46001 3.23383 8.62802C3.15439 8.79603 3.07907 8.96589 3.00796 9.13761C2.93683 9.30932 2.86997 9.48267 2.80734 9.65765C2.74473 9.83265 2.68645 10.0091 2.6325 10.1869C2.57854 10.3648 2.52899 10.5439 2.48383 10.7242C2.43867 10.9044 2.39797 11.0857 2.3617 11.268C2.32544 11.4503 2.29367 11.6334 2.26641 11.8172C2.23914 12.0011 2.21639 12.1855 2.19817 12.3704C2.17996 12.5554 2.16629 12.7407 2.15718 12.9263C2.14806 13.1119 2.14349 13.2977 2.14349 13.4836C2.14349 13.6694 2.14806 13.8552 2.15718 14.0408C2.16629 14.2264 2.17996 14.4117 2.19817 14.5967C2.21639 14.7817 2.23914 14.9661 2.26641 15.1499C2.29367 15.3338 2.32544 15.5168 2.3617 15.6991C2.39797 15.8814 2.43867 16.0627 2.48383 16.243C2.52899 16.4233 2.57854 16.6023 2.6325 16.7802C2.68645 16.958 2.74473 17.1345 2.80734 17.3095C2.86997 17.4845 2.93683 17.6577 3.00796 17.8295C3.07907 18.0012 3.15439 18.1711 3.23383 18.3391C3.31331 18.5071 3.39684 18.673 3.48446 18.837C3.57206 19.0009 3.66365 19.1626 3.7592 19.3221C3.85473 19.4815 3.95413 19.6384 4.0574 19.793C4.16067 19.9475 4.26764 20.0993 4.37837 20.2486C4.4891 20.398 4.6034 20.5444 4.72129 20.688C4.8392 20.8317 4.96058 20.9724 5.08539 21.1102C5.21019 21.2478 5.33831 21.3824 5.46974 21.5138C5.60115 21.6453 5.73572 21.7734 5.87344 21.8982C6.01114 22.023 6.15183 22.1444 6.29551 22.2623C6.43918 22.3801 6.58566 22.4945 6.73495 22.6052C6.88422 22.7159 7.03612 22.823 7.19066 22.9261C7.34521 23.0295 7.50217 23.1288 7.66157 23.2243C7.821 23.3199 7.98267 23.4115 8.14658 23.4991C8.31048 23.5867 8.47646 23.6702 8.64447 23.7497C8.81249 23.8291 8.98232 23.9046 9.15403 23.9756C9.32575 24.0467 9.49912 24.1137 9.67412 24.1763C9.84911 24.2388 10.0255 24.2971 10.2034 24.3511C10.3813 24.4051 10.5603 24.4546 10.7406 24.4998C10.9209 24.545 11.1022 24.5856 11.2845 24.6218C11.4668 24.6581 11.6498 24.6899 11.8337 24.7172C12.0175 24.7445 12.2019 24.7673 12.3869 24.7855C12.5718 24.8037 12.7571 24.8173 12.9428 24.8264ZM7.74797 12.6782L19.2523 12.6782C19.2658 12.6782 19.2793 12.6786 19.2928 12.6792C19.3061 12.6799 19.3196 12.6809 19.3329 12.6822C19.3463 12.6835 19.3598 12.6852 19.3729 12.6871C19.3862 12.6891 19.3996 12.6914 19.4127 12.694C19.4259 12.6966 19.4391 12.6996 19.452 12.7029C19.465 12.7061 19.4781 12.7097 19.4909 12.7136C19.5037 12.7175 19.5166 12.7217 19.5292 12.7263C19.5419 12.7308 19.5544 12.7356 19.5669 12.7408C19.5793 12.7459 19.5916 12.7514 19.6037 12.7571C19.6159 12.7629 19.6279 12.7689 19.6397 12.7753C19.6516 12.7816 19.6633 12.7882 19.6748 12.7951C19.6864 12.8021 19.6978 12.8092 19.709 12.8167C19.7202 12.8242 19.7311 12.8319 19.7419 12.84C19.7527 12.848 19.7634 12.8562 19.7736 12.8648C19.784 12.8733 19.7943 12.8821 19.8042 12.8911C19.8143 12.9001 19.824 12.9094 19.8334 12.9189C19.843 12.9284 19.8523 12.9382 19.8612 12.9481C19.8703 12.9581 19.8791 12.9683 19.8876 12.9787C19.8962 12.9891 19.9044 12.9997 19.9124 13.0105C19.9204 13.0213 19.9282 13.0323 19.9356 13.0434C19.9431 13.0546 19.9503 13.066 19.9573 13.0775C19.9641 13.0891 19.9708 13.1008 19.9771 13.1126C19.9834 13.1245 19.9894 13.1365 19.9953 13.1486C20.001 13.1608 20.0065 13.1731 20.0115 13.1855C20.0167 13.1979 20.0216 13.2105 20.0262 13.2231C20.0307 13.2358 20.0348 13.2486 20.0388 13.2614C20.0427 13.2743 20.0463 13.2873 20.0496 13.3003C20.0528 13.3134 20.0557 13.3265 20.0583 13.3397C20.0609 13.3529 20.0632 13.3661 20.0652 13.3794C20.0673 13.3927 20.0689 13.4061 20.0702 13.4194C20.0715 13.4328 20.0725 13.4462 20.0731 13.4597C20.0738 13.4731 20.0741 13.4865 20.0741 13.5C20.0741 13.5134 20.0738 13.5269 20.0731 13.5403C20.0725 13.5537 20.0715 13.5671 20.0702 13.5805C20.0689 13.5939 20.0673 13.6073 20.0652 13.6206C20.0632 13.6339 20.0609 13.6471 20.0583 13.6603C20.0557 13.6735 20.0528 13.6866 20.0496 13.6996C20.0463 13.7127 20.0427 13.7257 20.0388 13.7385C20.0348 13.7514 20.0307 13.7642 20.0262 13.7768C20.0216 13.7895 20.0167 13.802 20.0115 13.8144C20.0065 13.8269 20.001 13.8392 19.9953 13.8513C19.9894 13.8635 19.9834 13.8755 19.9771 13.8873C19.9708 13.8992 19.9641 13.9109 19.9573 13.9224C19.9503 13.934 19.9431 13.9453 19.9356 13.9565C19.9282 13.9677 19.9204 13.9787 19.9124 13.9895C19.9044 14.0003 19.8962 14.0109 19.8876 14.0213C19.8791 14.0317 19.8703 14.0419 19.8612 14.0518C19.8523 14.0618 19.843 14.0715 19.8334 14.0811C19.824 14.0906 19.8143 14.0998 19.8042 14.1088C19.7942 14.1179 19.784 14.1267 19.7736 14.1352C19.7634 14.1437 19.7527 14.152 19.7419 14.16C19.7311 14.168 19.7202 14.1758 19.709 14.1832C19.6978 14.1907 19.6864 14.1979 19.6748 14.2048C19.6633 14.2117 19.6516 14.2183 19.6397 14.2247C19.6279 14.231 19.6159 14.2371 19.6037 14.2428C19.5916 14.2486 19.5793 14.254 19.5669 14.2592C19.5544 14.2643 19.5419 14.2691 19.5292 14.2737C19.5166 14.2782 19.5037 14.2824 19.4909 14.2863C19.4781 14.2902 19.465 14.2938 19.452 14.2971C19.4391 14.3004 19.4259 14.3033 19.4127 14.3059C19.3996 14.3086 19.3862 14.3109 19.3729 14.3128C19.3598 14.3148 19.3463 14.3164 19.3329 14.3178C19.3196 14.3191 19.3061 14.3201 19.2928 14.3207C19.2793 14.3214 19.2658 14.3217 19.2523 14.3217L7.74797 14.3217C7.73453 14.3217 7.72109 14.3214 7.70764 14.3207C7.69422 14.3201 7.68081 14.3191 7.66744 14.3178C7.65405 14.3164 7.64071 14.3148 7.62741 14.3128C7.6141 14.3109 7.60086 14.3086 7.58765 14.3059C7.57447 14.3033 7.56134 14.3004 7.54829 14.2971C7.53526 14.2938 7.52231 14.2902 7.50945 14.2863C7.49657 14.2824 7.4838 14.2782 7.47114 14.2737C7.45848 14.2691 7.44593 14.2643 7.4335 14.2592C7.42109 14.254 7.40878 14.2486 7.39663 14.2428C7.38448 14.2371 7.37247 14.231 7.3606 14.2247C7.34874 14.2184 7.33704 14.2117 7.32552 14.2048C7.31397 14.1979 7.30261 14.1907 7.29144 14.1832C7.28025 14.1758 7.26926 14.168 7.25846 14.16C7.24767 14.152 7.23707 14.1437 7.22667 14.1352C7.21628 14.1267 7.2061 14.1179 7.19612 14.1088C7.18616 14.0998 7.17641 14.0906 7.1669 14.0811C7.15741 14.0715 7.14814 14.0618 7.1391 14.0518C7.13008 14.0419 7.12131 14.0317 7.11277 14.0213C7.10424 14.0109 7.09596 14.0003 7.08794 13.9895C7.07993 13.9787 7.0722 13.9677 7.06472 13.9565C7.05725 13.9453 7.05005 13.934 7.04314 13.9224C7.03622 13.9109 7.02959 13.8992 7.02327 13.8873C7.01692 13.8755 7.01087 13.8635 7.00512 13.8513C6.99938 13.8392 6.99394 13.8269 6.98879 13.8144C6.98364 13.802 6.97879 13.7895 6.97426 13.7768C6.96973 13.7642 6.96552 13.7514 6.96162 13.7385C6.9577 13.7257 6.95413 13.7127 6.95086 13.6996C6.94759 13.6866 6.94464 13.6735 6.94202 13.6603C6.9394 13.6471 6.9371 13.6339 6.93513 13.6206C6.93316 13.6073 6.93151 13.5939 6.93019 13.5805C6.92886 13.5671 6.92788 13.5537 6.92722 13.5403C6.92655 13.5269 6.92623 13.5134 6.92623 13.5C6.92623 13.4865 6.92655 13.4731 6.92722 13.4597C6.92788 13.4462 6.92886 13.4328 6.93019 13.4194C6.93151 13.4061 6.93315 13.3927 6.93511 13.3794C6.9371 13.3661 6.93939 13.3529 6.94202 13.3397C6.94464 13.3265 6.94759 13.3134 6.95086 13.3003C6.95413 13.2873 6.9577 13.2743 6.96162 13.2614C6.96552 13.2486 6.96973 13.2358 6.97426 13.2231C6.97879 13.2105 6.98364 13.1979 6.98879 13.1855C6.99394 13.1731 6.99938 13.1608 7.00512 13.1486C7.01087 13.1365 7.01692 13.1245 7.02327 13.1126C7.02959 13.1008 7.03622 13.0891 7.04314 13.0775C7.05005 13.066 7.05725 13.0546 7.06472 13.0434C7.0722 13.0323 7.07993 13.0213 7.08794 13.0105C7.09596 12.9997 7.10424 12.9891 7.11277 12.9787C7.12131 12.9683 7.13008 12.9581 7.1391 12.9481C7.14814 12.9382 7.15741 12.9284 7.1669 12.9189C7.17641 12.9094 7.18616 12.9001 7.19612 12.8911C7.2061 12.8821 7.21629 12.8733 7.22667 12.8648C7.23707 12.8562 7.24767 12.848 7.25846 12.84C7.26926 12.8319 7.28025 12.8242 7.29144 12.8167C7.30261 12.8092 7.31397 12.8021 7.32552 12.7951C7.33704 12.7882 7.34874 12.7816 7.3606 12.7753C7.37247 12.7689 7.38448 12.7629 7.39663 12.7571C7.40878 12.7514 7.42109 12.7459 7.4335 12.7408C7.44593 12.7356 7.45848 12.7308 7.47114 12.7263C7.4838 12.7217 7.49657 12.7175 7.50945 12.7136C7.52231 12.7097 7.53526 12.7061 7.54829 12.7029C7.56134 12.6996 7.57447 12.6966 7.58765 12.694C7.60085 12.6914 7.61411 12.6891 7.62741 12.6871C7.64071 12.6852 7.65405 12.6835 7.66744 12.6822C7.68081 12.6809 7.69422 12.6799 7.70764 12.6792C7.72109 12.6786 7.73453 12.6782 7.74797 12.6782Z"
              stroke="rgba(133, 137, 255, 1)"
              stroke-width="1"
              fill-rule="evenodd"
              fill="#8589FF"
            ></path>
          </svg>
        </button>
      </li>
    </transition-group>
  </div>
</template>

<style scoped lang="scss">
.todo-layout {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 12px 24px 10px;
  position: relative;
  width: 360px;
  left: 20px;
  top: 70px;
  h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .two-icon {
      width: 55px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 15px;
      .icon1,
      .icon2 {
        width: 20px;
        height: 20px;
      }
    }
  }

  .todo-input {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    input {
      flex: 1;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 10px;
      font-size: 15px;
      width: 220px;
      &:focus {
        outline: none;
        //border-color: #9c75c2;
      }
    }

    button {
      padding: 8px 16px;
      background-color: #3d9cfd;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background-color: #007dff;
      }
    }
  }

  .todo-list {
    list-style: none;
    padding: 0;
    position: relative;

    li {
      display: flex;
      align-items: center;
      padding: 8px;
      border-bottom: 1px solid #eee;
      gap: 10px;
      font-size: 15px;

      &.completed span {
        text-decoration: line-through;
        color: #888;
      }

      span {
        flex: 1;
      }

      .check {
        appearance: none;
        border: 1px solid #182033;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        &:checked {
          background-color: rgba(255, 255, 255, 0);
          border: 1px solid #888;
          &::after {
            content: '✓';
            display: flex;
            justify-content: center;
            align-items: center;
            color: #888;
          }
        }
      }

      .delete-btn {
        padding: 4px 8px;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        background-color: rgba($color: #000000, $alpha: 0);
      }
    }
  }
}

// 添加过渡动画样式
.todo-list-move {
  transition: transform 0.5s ease;
}

.todo-list-enter-active,
.todo-list-leave-active {
  transition: all 0.5s ease;
}

.todo-list-enter-from,
.todo-list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
